<template>
  <el-aside>
    <div id="nav-warp">
      <el-row class="tac">
        <el-col>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="RGB(63,63,63)"
            text-color="RGB(149,149,149)"
            active-text-color="#409EFF"
            unique-opened
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            router
            :default-active="activePath"
          >

            <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
              <template slot="title">
                <i :class="iconsObj[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item :index="'/'+subItem.path+''" v-for="subItem in item.children" :key="subItem.id" @click="SaveNavState('/'+subItem.path+'')" v-if="subItem.id!==202||(subItem.id===202&&role==='ROLE_SUPERADMIN')">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{subItem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </el-aside>
</template>
<script>
  import {getRole} from "../../utils/cacheProcessing"
  export default {
    name: "Aside",
    data() {
      return {
          menulist:[
              {id:1,authName:'管理图书',path:'',
                  children:[
                      {id:101,authName:'书籍列表',path:'bookList',show:'true'}
                  ]},
              {id:2,authName:'管理用户',path:'',
                  children:[
                      {id:201,authName:'用户列表',path:'userList',show:'true'},
                      {id:202,authName:'管理员列表',path:'adminList',show:'`role===\'ROLE_SUPERADMIN\'`'}]
              }
          ],
          iconsObj:{
              1:"el-icon-notebook-2",
              2:"el-icon-magic-stick"
          },

        isCollapse: false,
        menuName:"",
        path:'',
        role:"",
          activePath:'/bookList'
      };
    },
    methods: {
      handleOpen() {},
      handleClose() {},
      // toRouter(name){
        //   this.$router.push(name);
        // }
        //保存激活状态
      SaveNavState(activePath){
          window.sessionStorage.setItem('activePath',activePath)
      }
    },
    mounted() {
      this.role = getRole();
      console.log(getRole());
    },
      created() {
        this.activePath =window.sessionStorage.getItem('activePath');
        console.log(this.activePath)
        if(this.activePath===null){
            this.activePath="/bookList"
            this.$router.push(this.activePath);
        }

      }
  };
</script>
<style lang="scss" scoped>
  .el-aside {
    color: #333;
    height: 120vh;
    background-color: RGB(63, 63, 63);
  }
  /*.el-menu-item{
    left: 10px;
  }*/
  .aside-font_2{
    font-size: 15px !important;
  }
  i{
    height:24px
  }
</style>
